<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SG161 实时网速</title>
    <!--    <meta http-equiv="refresh" content="3">-->
    <script src="/echarts.min.js"></script>
</head>
<body style="margin: 0;height:100%;">
<div id="main" style="width: 100%;height: 100vh;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '实时网速'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(value) {
                //这里的value[0].value就是我需要每次显示在图上的数据
                if (value[0].value <= 0) {
                    value[0].value = '0B';
                } else {
                    var k = 1024;
                    var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                    //这里是取自然对数，也就是log（k）（value[0].value），求出以k为底的多少次方是value[0].value
                    var c = Math.floor(Math.log(value[0].value) / Math.log(k));
                    value[0].value = (value[0].value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
                }
                if (value[1].value <= 0) {
                    value[1].value = '0B';
                } else {
                    var k = 1024;
                    var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                    //这里是取自然对数，也就是log（k）（value[0].value），求出以k为底的多少次方是value[0].value
                    var c = Math.floor(Math.log(value[1].value) / Math.log(k));
                    value[1].value = (value[1].value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
                }
                //这里的value[0].name就是每次显示的name
                return value[0].name + "<br/>" + "上行网速: " + value[0].value + "<br/>" + "下行网速: " + value[1].value;
            }
        },
        legend: {
            data: ["上行网速", "下行网速"]
        },
        toolbox: {
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "100", "101", "102", "103", "104", "105", "106", "107", "108", "109", "110", "111", "112", "113", "114", "115", "116", "117", "118", "119", "120", "121", "122", "123", "124", "125", "126", "127", "128", "129", "130", "131", "132", "133", "134", "135", "136", "137", "138", "139", "140", "141", "142", "143", "144", "145", "146", "147", "148", "149", "150", "151", "152", "153", "154", "155", "156", "157", "158", "159", "160", "161", "162", "163", "164", "165", "166", "167", "168", "169", "170", "171", "172", "173", "174", "175", "176", "177", "178", "179", "180", "181", "182", "183", "184", "185", "186", "187", "188", "189", "190", "191", "192", "193", "194", "195", "196", "197", "198", "199", "200", "201", "202", "203", "204", "205", "206", "207", "208", "209", "210", "211", "212", "213", "214", "215", "216", "217", "218", "219", "220", "221", "222", "223", "224", "225", "226", "227", "228", "229", "230", "231", "232", "233", "234", "235", "236", "237", "238", "239", "240", "241", "242", "243", "244", "245", "246", "247", "248", "249", "250", "251", "252", "253", "254", "255", "256", "257", "258", "259", "260", "261", "262", "263", "264", "265", "266", "267", "268", "269", "270", "271", "272", "273", "274", "275", "276", "277", "278", "279", "280", "281", "282", "283", "284", "285", "286", "287", "288", "289", "290", "291", "292", "293", "294", "295", "296", "297", "298", "299", "300", "301", "302", "303", "304", "305", "306", "307", "308", "309", "310", "311", "312", "313", "314", "315", "316", "317", "318", "319", "320", "321", "322", "323", "324", "325", "326", "327", "328", "329", "330", "331", "332", "333", "334", "335", "336", "337", "338", "339", "340", "341", "342", "343", "344", "345", "346", "347", "348", "349", "350", "351", "352", "353", "354", "355", "356", "357", "358", "359", "360", "361", "362", "363", "364", "365", "366", "367", "368", "369", "370", "371", "372", "373", "374", "375", "376", "377", "378", "379", "380", "381", "382", "383", "384", "385", "386", "387", "388", "389", "390", "391", "392", "393", "394", "395", "396", "397", "398", "399", "400", "401", "402", "403", "404", "405", "406", "407", "408", "409", "410", "411", "412", "413", "414", "415", "416", "417", "418", "419", "420", "421", "422", "423", "424", "425", "426", "427", "428", "429", "430", "431", "432", "433", "434", "435", "436", "437", "438", "439", "440", "441", "442", "443", "444", "445", "446", "447", "448", "449", "450", "451", "452", "453", "454", "455", "456", "457", "458", "459", "460", "461", "462", "463", "464", "465", "466", "467", "468", "469", "470", "471", "472", "473", "474", "475", "476", "477", "478", "479", "480", "481", "482", "483", "484", "485", "486", "487", "488", "489", "490", "491", "492", "493", "494", "495", "496", "497", "498", "499", "500"]
        },
        yAxis: {
            type: "value",
            max: function (value) {
                var k = 1024;
                var c = Math.floor(Math.log(value.max) / Math.log(k));
                interval = Math.pow(k, c);
                return Math.ceil(value.max / interval) * interval;
            },
            interval: 2097152,
            axisLabel: {
                formatter: function (value, index) {
                    if (value <= 0) {
                        value = '0B';
                    } else {
                        var k = 1024;
                        var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                        //这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
                        var c = Math.floor(Math.log(value) / Math.log(k));
                        value = (value / Math.pow(k, c)) + ' ' + sizes[c];
                    }
                    //这里的value[0].name就是每次显示的name
                    return value;
                }
            },
        },
        series: [{
            itemStyle: {
                color: '#ef0000',
            },
            "data": [2482757.0, 4298173.0, 3504484.0, 648.0, 48.0, 0.0, 35064.0, 172820.0, 441718.0, 1317266.0, 2445956.0, 6156666.0, 1.0363046E7, 93839.0, 23111.0, 41167.0, 169702.0, 854729.0, 1898512.0, 2835358.0, 22298.0, 5106.0, 5749.0, 21681.0, 167195.0, 2285968.0, 3885447.0, 183583.0, 1801166.0, 931362.0, 16383.0, 0.0, 0.0, 0.0, 16389.0, 0.0, 0.0, 16395.0, 232570.0, 8523150.0, 7944220.0, 460378.0, 0.0, 0.0, 16454.0, 0.0, 0.0, 16460.0, 0.0, 0.0, 16466.0, 0.0, 0.0, 0.0, 279573.0, 4883389.0, 3099869.0, 16495.0, 0.0, 0.0, 16501.0, 0.0, 0.0, 0.0, 16507.0, 0.0, 0.0, 16513.0, 0.0, 0.0, 263101.0, 5049813.0, 2404730.0, 0.0, 16745.0, 0.0, 0.0, 16549.0, 0.0, 0.0, 0.0, 19504.0, 701.0, 0.0, 16565.0, 263863.0, 8107772.0, 17421.0, 0.0, 0.0, 16596.0, 0.0, 0.0, 0.0, 16602.0, 0.0, 0.0, 16608.0, 0.0, 0.0, 16614.0, 263421.0, 9653529.0, 4199936.0, 2882921.0, 0.0, 0.0, 16648.0, 0.0, 0.0, 16654.0, 0.0, 0.0, 0.0, 22534.0, 0.0, 0.0, 16667.0, 262825.0, 1.4052005E7, 5600819.0, 2628554.0, 0.0, 0.0, 16703.0, 0.0, 0.0, 2772917.0, 1399680.0, 0.0, 0.0, 16715.0, 0.0, 0.0, 280561.0, 1.1806478E7, 2390515.0, 1395053.0, 1773430.0, 4526617.0, 4905621.0, 19755.0, 0.0, 0.0, 16785.0, 0.0, 5884.0, 16796.0, 0.0, 0.0, 263146.0, 7136736.0, 0.0, 0.0, 16819.0, 0.0, 0.0, 16825.0, 0.0, 0.0, 0.0, 16831.0, 0.0, 0.0, 16837.0, 0.0, 1133611.0, 16855.0, 0.0, 0.0, 0.0, 16861.0, 0.0, 0.0, 16867.0, 0.0, 0.0, 16873.0, 0.0, 0.0, 0.0, 16879.0, 263139.0, 2615590.0, 16902.0, 0.0, 0.0, 16908.0, 0.0, 0.0, 0.0, 16914.0, 0.0, 0.0, 16920.0, 0.0, 0.0, 16926.0, 58546.0, 7636705.0, 2413990.0, 5306.0, 2948.0, 0.0, 16968.0, 0.0, 0.0, 16974.0, 0.0, 0.0, 16980.0, 0.0, 0.0, 0.0, 133518.0, 999457.0, 0.0, 17002.0, 0.0, 0.0, 17008.0, 0.0, 0.0, 0.0, 17014.0, 0.0, 0.0, 17020.0, 0.0, 0.0, 280662.0, 875424.0, 0.0, 0.0, 17039.0, 0.0, 0.0, 17045.0, 365.0, 0.0, 22928.0, 0.0, 116532.0, 163296.0, 24.0, 0.0, 0.0, 17077.0, 0.0, 0.0, 17078.0, 0.0, 0.0, 17080.0, 0.0, 0.0, 0.0, 17086.0, 116532.0, 147051.0, 17105.0, 0.0, 2944.0, 22423.0, 0.0, 0.0, 0.0, 17124.0, 0.0, 0.0, 17130.0, 0.0, 0.0, 17136.0, 174584.0, 88539.0, 0.0, 17154.0, 0.0, 0.0, 17160.0, 0.0, 0.0, 17166.0, 0.0, 0.0, 17172.0, 0.0, 0.0, 0.0, 182264.0, 140.0, 0.0, 20087.0, 0.0, 0.0, 17241.0, 0.0, 0.0, 9018.0, 17799.0, 0.0, 0.0, 17217.0, 0.0, 0.0, 17223.0, 0.0, 0.0, 0.0, 17229.0, 0.0, 0.0, 17235.0, 0.0, 0.0, 17241.0, 0.0, 0.0, 17247.0, 0.0, 0.0, 2968.0, 17259.0, 0.0, 0.0, 17265.0, 0.0, 0.0, 17271.0, 0.0, 0.0, 17277.0, 0.0, 0.0, 0.0, 17283.0, 0.0, 0.0, 17289.0, 0.0, 0.0, 17295.0, 0.0, 0.0, 0.0, 17301.0, 0.0, 0.0, 17307.0, 0.0, 0.0, 17313.0, 0.0, 0.0, 17319.0, 0.0, 0.0, 0.0, 17395.0, 0.0, 0.0, 17534.0, 5874.0, 0.0, 17343.0, 0.0, 0.0, 17349.0, 0.0, 0.0, 0.0, 17350.0, 0.0, 0.0, 17721.0, 9114.0, 80720.0, 54982.0, 97907.0, 208542.0, 482235.0, 399850.0, 1364549.0, 1312653.0, 1662819.0, 3289120.0, 2002323.0, 8864461.0, 9530262.0, 3569031.0, 17480.0, 9473551.0, 3945236.0, 3018704.0, 2904966.0, 698245.0, 228143.0, 876069.0, 2930770.0, 6794939.0, 1.3664619E7, 5176904.0, 656240.0, 853112.0, 1133188.0, 6024735.0, 1.2359494E7, 4197473.0, 5067851.0, 602629.0, 280751.0, 984360.0, 5620585.0, 7882291.0, 1395756.0, 2821832.0, 883984.0, 1.4066807E7, 3704692.0, 3920821.0, 3692641.0, 2099968.0, 6604936.0, 0.0, 4612575.0, 1410916.0, 1378104.0, 8450425.0, 2953080.0, 4843387.0, 2165592.0, 1.460376E7, 3560102.0, 5085860.0, 2970865.0, 5840536.0, 3806192.0, 2887456.0, 5070910.0, 3595490.0, 656310.0, 5005221.0, 2821832.0, 4856818.0, 4348980.0, 4069681.0, 1443728.0, 70.0, 1395959.0, 2165592.0, 6234280.0, 4432665.0, 676918.0, 2821902.0, 2821832.0, 1702203.0, 1.6783188E7, 7793827.0, 4201650.0, 5202083.0, 5774912.0, 2559336.0, 1445403.0, 2446549.0, 3478072.0, 6332716.0, 4462432.0, 908139.0, 1378104.0, 2821832.0, 2839601.0, 1.0299764E7, 4996916.0, 3609320.0, 2839601.0, 5251612.0, 5118672.0, 2887456.0, 3171818.0, 656240.0, 0.0, 2839602.0, 3642655.0, 5874.0, 0.0, 23066.0, 0.0, 0.0, 0.0, 17746.0, 0.0, 3413830.0, 8238501.0, 3626460.0, 6848113.0, 2312426.0, 54531.0, 6737572.0, 3794413.0],
            "markLine": {
                "data": [{
                    "type": "average",
                    "name": "平均值"
                }],
                "label": {
                    formatter: function (value) {
                        if (value.value <= 0) {
                            value = '0B';
                        } else {
                            var k = 1024;
                            var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                            //这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
                            var c = Math.floor(Math.log(value.value) / Math.log(k));
                            value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
                        }
                        //这里的value[0].name就是每次显示的name
                        return value;
                    }
                }
            },
            "markPoint": {
                "data": [{
                    "type": "max",
                    "name": "最大值"
                }],
                symbol: "roundRect",
                symbolSize: [70, 30],
                "label": {
                    formatter: function (value) {
                        if (value.value <= 0) {
                            value = '0B';
                        } else {
                            var k = 1024;
                            var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                            //这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
                            var c = Math.floor(Math.log(value.value) / Math.log(k));
                            value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
                        }
                        //这里的value[0].name就是每次显示的name
                        return value;
                    }
                }
            },
            "name": "上行网速",
            "smooth": false,
            "type": "line"
        },
            {
                itemStyle: {
                    color: '#5bf',
                },
                "data": [1076.0, 777.0, 0.0, 648.0, 48.0, 0.0, 7608.0, 1178.0, 0.0, 2729.0, 4520.0, 24.0, 0.0, 72.0, 4248.0, 0.0, 0.0, 777.0, 0.0, 0.0, 13663.0, 53.0, 976.0, 1180.0, 777.0, 35265.0, 3299.0, 863.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1075.0, 2156.0, 1856.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1850.0, 3233.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 1071.0, 4008.0, 0.0, 0.0, 1359.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 10735.0, 0.0, 0.0, 777.0, 3227.0, 18471.0, 4587.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 3229.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1195.0, 0.0, 0.0, 777.0, 3225.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 1850.0, 2154.0, 0.0, 1295.0, 64.0, 1083.0, 0.0, 10707.0, 0.0, 0.0, 777.0, 0.0, 750.0, 777.0, 0.0, 0.0, 1071.0, 2931.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1071.0, 3231.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 1073.0, 5415.0, 863.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1073.0, 2154.0, 1854.0, 10456.0, 57.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1850.0, 1077.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 4006.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 5984.0, 0.0, 0.0, 1195.0, 0.0, 1071.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 1071.0, 0.0, 777.0, 0.0, 9976.0, 1358.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1071.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1852.0, 0.0, 17629.0, 834.0, 0.0, 0.0, 777.0, 0.0, 0.0, 1073.0, 1359.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 9954.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 1359.0, 418.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 49431.0, 8950.0, 8321.0, 3903.0, 6448.0, 40754.0, 777.0, 0.0, 0.0, 3203.0, 14573.0, 4348.0, 4106.0, 1828.0, 0.0, 34495.0, 777.0, 4194.0, 1035.0, 0.0, 777.0, 3089.0, 5273.0, 1941.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 4219.0, 0.0, 777.0, 0.0, 0.0, 1828.0, 0.0, 1056.0, 0.0, 777.0, 0.0, 3163.0, 1835.0, 0.0, 0.0, 777.0, 0.0, 1058.0, 0.0, 3469.0, 0.0, 0.0, 777.0, 0.0, 0.0, 3167.0, 1835.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 1053.0, 10244.0, 57.0, 0.0, 0.0, 777.0, 0.0, 0.0, 27118.0, 834.0, 0.0, 0.0, 5003.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1832.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1058.0, 0.0, 0.0, 777.0, 1053.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 418.0, 0.0, 1358.0, 0.0, 0.0, 0.0, 777.0, 0.0, 2107.0, 777.0, 0.0, 458.0, 3798.0, 1833.0, 0.0, 116.0],
                "markLine": {
                    "data": [{
                        "type": "average",
                        "name": "平均值"
                    }],
                    "label": {
                        formatter: function (value) {
                            if (value.value <= 0) {
                                value = '0B';
                            } else {
                                var k = 1024;
                                var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                                //这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
                                var c = Math.floor(Math.log(value.value) / Math.log(k));
                                value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
                            }
                            //这里的value[0].name就是每次显示的name
                            return value;
                        }
                    }
                },
                "markPoint": {
                    "data": [{
                        "type": "max",
                        "name": "最大值"
                    }],
                    symbol: "roundRect",
                    symbolSize: [70, 30],
                    "label": {
                        formatter: function (value) {
                            if (value.value <= 0) {
                                value = '0B';
                            } else {
                                var k = 1024;
                                var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                                //这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
                                var c = Math.floor(Math.log(value.value) / Math.log(k));
                                value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
                            }
                            //这里的value[0].name就是每次显示的name
                            return value;
                        }
                    }
                },
                "name": "下行网速",
                "smooth": false,
                "type": "line"
            }],
        animation: false,
        animationDuration: 5
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
